<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>箭头函数的基本写法汇总(Summary of Basic Writing Methods for Arrow Functions)</title>
  <!-- 
  在JavaScript中，箭头函数（Arrow Functions）是 ES6 引入的一种简化函数书写的方法。箭头函数具有更简洁的语法，并且在处理 this 的上下文时表现出不同于传统函数的特性。
  一、基本语法
  1. 基本形式：
    - 箭头函数的基本语法是：(参数) => { 函数体 }。
    const add = (a, b) => {
      return a + b;
    };
    console.log(add(2, 3)); // 输出: 5
  2. 单个参数：
    - 如果箭头函数只有一个参数，可以省略圆括号。
    const square = x => x * x;
    console.log(square(4)); // 输出: 16
  3. 无参数：
    - 如果没有参数，必须使用空的圆括号。
    const greet = () => 'Hello, World!';
    console.log(greet()); // 输出: Hello, World!

  二、简化写法
  1. 省略大括号和 return：
    - 如果箭头函数的函数体只有一条语句，可以省略大括号和 return 关键字，直接返回结果。
    const double = x => x * 2;
    console.log(double(5)); // 输出: 10

  三、处理 this
  - 箭头函数不会创建自己的 this 上下文，它会捕获外部函数的 this 值。这使得在某些情况下（如事件处理和回调函数中）使用箭头函数变得更方便。
    const obj = {
      value: 42,
      getValue: function() {
        return () => {
          console.log(this.value); // 这里的 this 指向 obj
        };
      }
    };

    const func = obj.getValue();
    func(); // 输出: 42

  四、注意事项
  1. 不能用作构造函数：
    - 箭头函数不能用 new 关键字调用，因此不能作为构造函数。
  2. 没有 arguments 对象：
    - 箭头函数没有自己的 arguments 对象。如果需要访问参数，可以使用剩余参数语法。
  3. 不能使用 this、super、new.target：
    - 箭头函数不能使用 this、super 和 new.target，这些特性在箭头函数中是无效的。

  五、总结
  - 箭头函数提供了一种更简洁的函数写法，适用于简单的函数表达式。
  - 它们不会创建自己的 this，而是从外部上下文中继承，这在处理回调函数时非常有用。
  - 箭头函数的写法灵活，可以省略括号和大括号，简化代码。
   -->
</head>
<body>

  <script>
    // 1. 基本写法
    const square = x => x * x;
    console.log(square(4)); // 输出: 16

    // 2. 带参数：
    const greet = (name) => `Hello, ${name}!`;
    console.log(greet('Alice')); // 输出: Hello, Alice!

    // 3. 没有参数：
    const sayHi = () => console.log('Hi!');
    sayHi(); // 输出: Hi!

    // 4. 带大括号和 return 语句：
    const double = (x) => {
      return x * 2;
    };
    console.log(double(5)); // 输出: 10

    // 5. 箭头函数中的 this
    const obj = {
      value: 42,
      getValue: function () {
        return () => {
          console.log(this.value); // 这里的 this 指向 obj
        };
      },
    };
    obj.getValue()(); // 输出: 42

    // 6. 箭头函数中的 arguments
    const names = ['Alice', 'Bob', 'Charlie'];
    const nums = [12, 34, 56];
    const sum = (...args) => {
      return args.reduce((acc, curr) => acc + curr, 0);
    };
    console.log(sum(...nums)); // 输出: 102

    const result = nums.filter(item => item % 2 === 0)
                     .map(item => item * item)
                     .reduce((prevValue, item) => prevValue + item)
    console.log(result)




  </script>
  
</body>
</html>